import { Picker } from "@react-native-picker/picker";
import { Stack, useLocalSearchParams, useRouter } from "expo-router";
import React, { useCallback, useEffect, useState } from "react";
import {
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useResultStore } from "../store";

const KouFeiScreen: React.FC = () => {
  const router = useRouter();
  const params = useLocalSearchParams();
  const id: string | undefined = Array.isArray(params.id) ? params.id[0] : params.id;
  const name: string | undefined = Array.isArray(params.name) ? params.name[0] : params.name;
  const { key, result, clearResult } = useResultStore();

  const callback = useCallback(() => {
    if (key === 'fuwu' && result) {
      console.log('返回的参数:', result);
      clearResult('fuwu'); // 假设你有这个函数
    }
  }, [key, result]);

  useEffect(() => {
    callback
  })


  const [service, setService] = useState<string>("洗车服务");
  const [coupon, setCoupon] = useState<string>("年卡");
  const [staff, setStaff] = useState<string>("李师傅");
  const [remark, setRemark] = useState<string>("");

  const handleSubmit = () => {
    alert(
      `会员扣款成功！\n服务内容：${service}\n优惠券：${coupon}\n服务人员：${staff}\n备注：${remark}`
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <Stack.Screen options={{ title: name }} />
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        <Text style={styles.title}>会员扣款</Text>

        {/* 会员姓名 */}
        <Text style={styles.label}>会员姓名</Text>
        <View style={styles.infoBox}>
          <Text style={styles.infoText}>张三</Text>
        </View>

        {/* 服务内容 */}
        <Text style={styles.label}>服务内容</Text>
        <View style={styles.pickerContainer}>
          <Picker style={styles.picker}
            mode="dropdown"
            dropdownIconColor="#666"
            selectedValue={service}
            onValueChange={setService}>
            <Picker.Item label="洗车服务" value="洗车服务" />
            <Picker.Item label="美容养护" value="美容养护" />
            <Picker.Item label="机油更换" value="机油更换" />
            <Picker.Item label="车辆保养" value="车辆保养" />
          </Picker>
        </View>

        {/* 优惠券 */}
        <Text style={styles.label}>优惠券</Text>
        <View style={styles.pickerContainer}>
          <Picker style={styles.picker}
            selectedValue={coupon}
            onValueChange={setCoupon}
            mode="dropdown"
            dropdownIconColor="#666">
            <Picker.Item label="年卡 - ¥999" value="年卡" />
            <Picker.Item label="季卡 - ¥299" value="季卡" />
            <Picker.Item label="次卡 - ¥99" value="次卡" />
          </Picker>
        </View>

        {/* 服务人员 */}
        <Text style={styles.label}>服务人员</Text>
        <View style={styles.pickerContainer}>
          <Picker style={styles.picker}
            selectedValue={staff}
            onValueChange={setStaff}
            mode="dropdown"
            dropdownIconColor="#666"
          >
            <Picker.Item label="李师傅" value="李师傅" />
            <Picker.Item label="王师傅" value="王师傅" />
            <Picker.Item label="赵师傅" value="赵师傅" />
          </Picker>
        </View>

        {/* 备注 */}
        <Text style={styles.label}>备注</Text>
        <TextInput
          style={styles.textInput}
          placeholder="填写备注内容"
          multiline
          value={remark}
          onChangeText={setRemark}
        />

        {/* 按钮 */}
        <TouchableOpacity style={styles.button} onPress={handleSubmit}>
          <Text style={styles.buttonText}>确认扣款</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
};

export default KouFeiScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F3F4F6",
  },
  scrollContainer: {
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: "600",
    color: "#111827",
    textAlign: "center",
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: "500",
    color: "#374151",
    marginBottom: 5,
  },
  infoBox: {
    backgroundColor: "#F9FAFB",
    borderColor: "#ccc",
    borderWidth: 1,
    borderRadius: 12,
    paddingVertical: 10,
    paddingHorizontal: 15,
    marginBottom: 15,
  },
  infoText: {
    fontSize: 16,
    color: "#111827",
  },
  pickerContainer: {
    borderWidth: 1,
    borderColor: "#ccc",
    backgroundColor: '#ffffff',
    borderRadius: 12,
    marginBottom: 15,
    overflow: "hidden", // 确保圆角生效
    // Web 专用样式
    ...Platform.select({
      web: {
        minHeight: 45,
        justifyContent: 'center',
      }
    })
  },
  picker: {
    backgroundColor: "#FFFFFF",
    border: 'none',
    // Web 专用样式
    ...Platform.select({
      web: {
        width: '100%',
        height: '100%',
        border: 'none',
        outline: 'none',
      }
    })
  },
  textInput: {
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 12,
    padding: 15,
    marginBottom: 25,
    backgroundColor: "#FFFFFF",
    textAlignVertical: "top",
  },
  button: {
    backgroundColor: "#2563EB",
    paddingVertical: 15,
    borderRadius: 16,
    alignItems: "center",
  },
  buttonText: {
    color: "#FFFFFF",
    fontSize: 18,
    fontWeight: "600",
  },
});
